<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="${una}/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/img/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="${una}/css/bootstrap.css" />
    <link rel="stylesheet" href="${una}/css/font-awesome.css" />
    <link rel="stylesheet" href="${una}/css/ionicons.css" />
    <link rel="stylesheet" href="${una}/js/layer/theme/default/layer.css"/>
    <link rel="stylesheet" href="${una}/css/blog-boot.css" />
    <title>友链 - 尤娜(UnaBoot)</title>
    <style>
        .table thead th{
            border-bottom: 1px solid #dee2e6 !important;
            border-top: 0 !important;
        }
        .table td{
            border-top: 1px solid #dee2e6 !important;
        }
        .table a.current{
            color: #007bff;
        }
        .layui-layer-btn .layui-layer-btn0{
            border-color: none;
            color:#fff !important;
        }
    </style>
</head>
<body>
<div class="header fixed-top">
    <div class="container">
        <div class="left">
            <a href="${una}/admin/dashboard" class="logo"><img src="${blog_logo!'${una}/img/logo.png'}" class="img-fluid" style="height: 40px"></a>
        </div>
        <div class="middle">
            <div class="inner">
                <a href="${una}/admin/dashboard"><i class="fa fa-dashboard"></i> 主页</a>
                <a href="${una}/admin/posts" ><i class="fa fa-edit"></i> 创作</a>
                <a href="${una}/admin/categories"><i class="fa fa-th-large"></i> 页面</a>
                <a href="${una}/admin/themes" ><i class="fa fa-gift"></i> 主题</a>
                <a href="${una}/admin/settings/general" class="current"><i class="fa fa-sliders"></i> 系统</a>
            </div>
        </div>
        <div class="right">
            <a href="/admin/logout" data-toggle="tooltip" data-placement="bottom" title="退出"><i class="fa fa-sign-out"></i></a>
            <a href="javascript:void(0);" id="profile" data-toggle="tooltip" data-placement="bottom" title="个人设置"><i class="fa fa-cogs"></i></a>
            <a href="${una}/index.html" data-toggle="tooltip" data-placement="bottom" title="博客主页"><i class="fa fa-home"></i></a>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="${una}/admin/settings/general"><i class="fa fa-wrench"></i> 常规设置</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${una}/admin/settings/cdn"><i class="fa fa-rocket"></i> CDN设置</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${una}/admin/settings/druid"><i class="fa fa-database"></i> SQL监控</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" role="tab" href="${una}/admin/links"><i class="fa fa-link"></i> 友链设置</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${una}/admin/settings/talk"><i class="fa fa-comments-o"></i> Gitalk设置</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${una}/admin/settings/cache"><i class="fa fa-server"></i> 缓存管理</a>
                            </li>
                        </ul>
                    </div>
                    <div class="box-body">
                        <div class="tab-content">
                            <div class="tab-pane show fade active" id="cdn" role="tabpanel" aria-labelledby="cdn">
                                <div class="link-form">
                                    <form class="form-row form-inline" id="link-form">
                                        <input type="text" class="form-control mr-2 ml-1" name="name" placeholder="链接名称"/>
                                        <input type="url" class="form-control mr-2" name="url" placeholder="链接地址"/>
                                        <input type="number" min="0" step="1" name="sortNum" class="form-control mr-2" placeholder="排序号"/>
                                        <button type="button" class="btn btn-primary submit-btn pl-3 pr-3"><i class="fa fa-check"></i></button>
                                    </form>
                                </div>
                                <table class="table table-hover mt-2">
                                    <thead class="thead-light">
                                        <tr><th>#</th><th>名称</th><th>地址</th><th>排序</th><th>操作</th></tr>
                                    </thead>
                                    <tbody>
                                        <#if links?? && links?size gt 0>
                                            <#list links as link>
                                                <tr>
                                                    <td>${link.id}</td>
                                                    <td>${link.name}</td>
                                                    <td>${link.url}</td>
                                                    <td>${link.sortNum}</td>
                                                    <td>
                                                        <a href="javascript:void(0)" data-id="${link.id}" title="修改" class="edit-link btn btn-primary btn-sm"><i class="fa fa-edit"></i></a>
                                                        <a href="javascript:void(0)" data-id="${link.id}" title="删除" class="remove-link btn btn-dark btn-sm"><i class="fa fa-trash-o"></i></a>
                                                    </td>
                                                </tr>
                                            </#list>
                                        </#if>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">

</div>
</body>

<script type="text/javascript" src="${una}/js/jquery.min.js" ></script>
<script type="text/javascript" src="${una}/js/layer/layer.js"></script>
<script type="text/javascript" src="${una}/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="${una}/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="${una}/js/bootstrap.bundle.js" ></script>
<script>
    $(function(){
        $(".submit-btn").on("click",function(){
            var data = $("#link-form").serializeJSON();
            data = JSON.stringify(data);
            layer.confirm("你确定保存该链接吗？",{
                btn:['确定','取消'],
                offset:"150px"
            },function(){
                let loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'post',
                    url:'${una}/admin/links/write',
                    data:data,
                    contentType:'application/json;charset=UTF-8',
                    success:function(){
                        layer.close(loading);
                        layer.alert("链接已保存",{title:'提示信息',icon:1,offset:'150px'},function(){
                            window.location.reload();
                        });
                    },
                    error:function(){
                        layer.close(loading);
                        layer.alert("服务器异常",{title:'提示信息',icon:0,offset:'150px'});
                    }
                });
            });
        });
        $(".edit-link").on("click",function(){
            var id = $(this).attr("data-id");
            layer.open({
                skin:"",
                type:2,
                title:"<i class='fa fa-plus'> 修改友链</i>",
                shadeClose:false,
                shade:0.5,
                offset:['100px'],
                area:['30%','29.5%'],
                content:"${una}/admin/links/"+id,
                resize:false,
                anim:2,
                end:function(){
                    location.reload();
                }
            });
        });
        $(".remove-link").on("click",function(){
            var id = $(this).attr("data-id");
            layer.confirm("你确定要删除该链接吗?",{
                btn:['确定','取消'],
                icon:3,
                title:'提示信息',
                offset:['150px']
            },function(){
                var loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'delete',
                    url:'${una}/admin/links/'+id,
                    success:function(){
                        layer.close(loading);
                        layer.alert("链接已经从系统移除!",{title:'提示信息',icon:1,offset:["150px"]},function(){
                            window.location.reload();
                        });
                    },
                    error:function(){
                        layer.close(loading);
                        layer.alert("服务器异常.",{title:'提示信息',icon:0,offset:["150px"]});
                    }
                });
            });
        });
        $("#profile").on("click",function(){
            layer.open({
                type:2,
                title:"<i class='fa fa-users'> 重置管理员密码</i>",
                shadeClose:false,
                shade:0.5,
                area:['400px','350px'],
                offset:['150px'],
                content:"${una}/admin/user/profile",
                resize:false,
                anim:2,
            });
        });
    });
</script>
</html>
